<template>
  <section class="relative pt-40 bg-white">
    <div class="absolute h-[420px] z-0 inset-x-0 -top-60">
      <img class="object-cover h-full w-full" src="@/assets/img/body.svg" />
    </div>
    <section class="relative bg-no-repeat" data-v-0592cb0e="">
      <div
        class="max-w-screen-xl mx-auto lg:grid lg:grid-cols-2 lg:gap-8 grid-flow-row-dense clear-both px-4 lg:px-16 py-20 sm:py-40 items-center"
        data-v-0592cb0e=""
      >
        <div class="col-start-1" data-v-0592cb0e="">
          <div
            class="bg-yellow rounded py-3 px-16 inline-block mb-7"
            data-v-0592cb0e=""
          >
            Step 1
          </div>
          <h3
            class="text-[18px] sm:text-[30px] leading-[40px] font-bold mb-2"
            data-v-0592cb0e=""
          >
            Sign up
          </h3>
          <p class="font-sm text-black-70" data-v-0592cb0e="">
            Connect via your mobile number. Alternatively, you can sign up with
            your email address. It just takes a few seconds to start unboxing
            awesome mystery boxes.
          </p>
          <div
            class="mt-8 rounded text-black-70 p-5 flex flex-col sm:flex-row bg-gray-lightest"
            data-v-0592cb0e-s=""
          >
            <div class="flex">
              <div
                class="m-auto w-16 h-16 rounded-full bg-white flex justify-center items-center"
              >
                <img src="@/assets/img/icon.svg" />
              </div>
            </div>
            <div class="ml-5">
              <h4 class="mb-3">Sign up to open box</h4>
              <p class="">
                Pro tip: verify your email address and get the most out of us.
              </p>
            </div>
          </div>
        </div>
        <div class="col-start-2" data-v-0592cb0e="">
          <img
            class="mx-auto lg:mx-0 lg:float-right"
            src="@/assets/img/step1.svg"
            alt="Sign up"
            data-v-0592cb0e=""
          />
        </div>
      </div>
    </section>
    <section class="relative bg-no-repeat arrowed" data-v-0592cb0e="">
      <div
        class="max-w-screen-xl mx-auto lg:grid lg:grid-cols-2 lg:gap-8 grid-flow-row-dense clear-both px-4 lg:px-16 py-20 sm:py-40 items-center"
        data-v-0592cb0e=""
      >
        <div class="col-start-1" data-v-0592cb0e="">
          <div
            class="bg-yellow rounded py-3 px-16 inline-block mb-7"
            data-v-0592cb0e=""
          >
            Step 2
          </div>
          <h3
            class="text-[18px] sm:text-[30px] leading-[40px] font-bold mb-2"
            data-v-0592cb0e=""
          >
            Unbox hyped products
          </h3>
          <p class="font-sm text-black-70" data-v-0592cb0e="">
            Select and open our 50+ hand-crafted mystery boxes. These boxes
            exclusively contain authentic products which gives you the
            opportunity to acquire rare pieces for just a fraction of their
            price. The rewards include products from top brands like:
          </p>
          <img
            class="mt-2.5"
            src="@/assets/img/allbrand.svg"
            data-v-0592cb0e-s=""
          />
          <p class="text-[8px] text-black-50 mt-2.5" data-v-0592cb0e-s="">
            All product and company names, images and logos are trademarks or
            registered trademarks of their respective holders. The use of them
            does not imply any affiliation with or endorsement by them.
          </p>
          <div
            class="mt-8 rounded text-black-70 p-5 flex flex-col sm:flex-row bg-white"
            data-v-0592cb0e-s=""
          >
            <div class="flex">
              <div
                class="m-auto w-16 h-16 rounded-full bg-white flex justify-center items-center"
              >
                <img src="@/assets/img/money.svg" />
              </div>
            </div>
            <div class="ml-5">
              <h4 class="mb-3">100% Authentic and Provably Fair</h4>
              <p class="">
                All unboxings are 100% fair and protected by our
                industry-leading provably fair technology.
              </p>
              <div class="mt-4 mb-2">
                <router-link to="/all-boxes" class=""
                  ><button
                    type="button"
                    class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary py-1"
                  >
                    <div>Learn more</div>
                    <!---->
                  </button></router-link
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-start-2" data-v-0592cb0e="">
          <img
            class="mx-auto lg:mx-0 lg:float-right"
            src="@/assets/img/step3.svg"
            alt="Unbox hyped products"
            data-v-0592cb0e=""
          />
        </div>
      </div>
    </section>
    <section class="relative bg-no-repeat arrowed reversed" data-v-0592cb0e="">
      <div
        class="max-w-screen-xl mx-auto lg:grid lg:grid-cols-2 lg:gap-8 grid-flow-row-dense clear-both px-4 lg:px-16 py-20 sm:py-40 items-center"
        data-v-0592cb0e=""
      >
        <div class="col-start-2" data-v-0592cb0e="">
          <div
            class="bg-yellow rounded py-3 px-16 inline-block mb-7"
            data-v-0592cb0e=""
          >
            Step 3
          </div>
          <h3
            class="text-[18px] sm:text-[30px] leading-[40px] font-bold mb-2"
            data-v-0592cb0e=""
          >
            Not happy? Let's exchange
          </h3>
          <p class="font-sm text-black-70" data-v-0592cb0e="">
            While our boxes are packed with tons of cool stuff, but the personal
            preferences vary. If you don't like the product you have drawn, you
            can always exchange it for ⭐️ and open other mystery boxes instead.
          </p>
          <p
            class="text-[10px] leading-normal text-black-50 mt-7"
            data-v-0592cb0e-s=""
          >
            Due to legal and regulatory restrictions, we are not allowed to
            refund or payout 💎 that have already been used to open boxes or
            have been gained through product exchanges. You can always ask for a
            refund as long as it has not been used for anything and was not
            granted by a partner website. To avoid fees or issues, please
            contact us to arrange a payback.
          </p>
        </div>
        <div class="col-start-1" data-v-0592cb0e="">
          <img
            class="mx-auto lg:mx-0 lg:float-left"
            src="@/assets/img/step4.svg"
            alt="Not happy? Let's exchange"
            data-v-0592cb0e=""
          />
        </div>
      </div>
    </section>
    <section class="relative bg-no-repeat arrowed" data-v-0592cb0e="">
      <div
        class="max-w-screen-xl mx-auto lg:grid lg:grid-cols-2 lg:gap-8 grid-flow-row-dense clear-both px-4 lg:px-16 py-20 sm:py-40 items-center"
        data-v-0592cb0e=""
      >
        <div class="col-start-1" data-v-0592cb0e="">
          <div
            class="bg-yellow rounded py-3 px-16 inline-block mb-7"
            data-v-0592cb0e=""
          >
            Step 4
          </div>
          <h3
            class="text-[18px] sm:text-[30px] leading-[40px] font-bold mb-2"
            data-v-0592cb0e=""
          >
            Ship your products
          </h3>
          <p class="font-sm text-black-70" data-v-0592cb0e="">
            You can comfortably have your unboxed products delivered to your
            doorstep. We ship globally and attempt to keep shipping costs to a
            minimum. Depending on your location, customers receive their
            products within 7 days to 2 weeks (we are working on this).
          </p>
        </div>
        <div class="col-start-2" data-v-0592cb0e="">
          <img
            class="mx-auto lg:mx-0 lg:float-right"
            src="@/assets/img/step5.svg"
            alt="Ship your products"
            data-v-0592cb0e=""
          />
        </div>
      </div>
    </section>
  </section>
</template>

<script>
export default {};
</script>

<style></style>
